<template>
  <div>
    <div id="l_navigationStyle" :class="color?'green':''">
      <div class="return iconfont" :class="icon"></div>
      <div class="title">{{title}}</div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapGetters } from "vuex";
export default {
  data() {
    return {
      title: this.$store.state.navigation.title,
      icon: this.$store.state.navigation.icon,
      color: this.$store.state.navigation.color
    };
  },
  props: ["text"],
  computed: {
    // 监听导航的变化
    set_title() {
      return this.$store.state.navigation.title;
    },
    set_icon() {
      return this.$store.state.navigation.icon;
    },
    set_color() {
      return this.$store.state.navigation.color;
    }
  },
  watch: {
    set_title(message) {
      this.title = message;
    },
    set_icon(message) {
      this.icon = message;
    },
    set_color(message) {
      this.color = message;
    }
  },
  created() {}
};
</script>

<style lang="less">
@import url("../utils/public-color.less");
#l_navigationStyle {
  height: @page_padding_top;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  .title {
    height: @page_nav_top;
    line-height: @page_nav_top;
    text-align: center;
    color: @font_color;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    font-size: 3.8vw;
    font-weight: 600;
  }
  .return {
    font-size: 3.8vw;
    font-weight: 600;
    position: absolute;
    bottom: 0;
    left: 5vw;
    height: @page_nav_top;
    line-height: @page_nav_top;

  }
  &.green {
    background-image: linear-gradient(0deg, #37a000 0%, #43c101 100%),
      linear-gradient(#fc7a51, #fc7a51);
    background-blend-mode: normal, normal;
    box-shadow: 0.12vw 0.352vw 0.833vw 0.093vw rgba(0, 0, 0, 0.3);
    .title,.return {
      color: #fff;
    }
  }
}
</style>